<template>
    <div style="width: 100%;height: 100%;padding: 1px;display: flex;flex-direction: row;position:relative;">
        <div style="width: 100%;height: 100%;background-color: skyblue;" ref="topo001"></div>
        <div style="position: absolute;left: 1px;top: 1px;z-index: 999;display: flex;flex-direction: column;padding: 2px;gap: 5px;">
            <el-button size="mini" round @click="addImageNode" style="width: 100px;margin-left: 0 !important;">
                插件弹窗
            </el-button>
            <el-button size="mini" round @click="addImageNode2" style="width: 100px;margin-left: 0 !important;">
                自定义弹窗
            </el-button>
        </div>
        <div style="position: absolute;left: 1px;bottom: 1px;z-index: 999;display: flex;flex-direction: column;padding: 2px;gap: 5px;">
        </div>
    </div>
</template>
<script>
    import {Stage, Layer, ImageNode, Link} from '@jtopo/core';
    import {Tooltip, PopupMenu} from '@jtopo/extensions';
    import {Editor} from '@jtopo/editor';
    import CustomTooltip from "./t002/CustomTooltip";
    import CustomPopupMenu from "./t002/CustomPopupMenu";

    export default {
        data() {
            return {
                logList: [],
                stage: null,
                layer: null,
            }
        },
        mounted() {
            this.initTopo();
        },
        methods: {
            addImageNode2() {
                //添加图片节点
                let node = new ImageNode('鼠标放上来', 0, 0, 64, 64);
                node.setImage(require('./t002/icons/icon_router.png'));
                this.layer.addChild(node);
                const customTooltip = new CustomTooltip(this.stage);
                customTooltip.setHtml('小提示:右击弹出菜单'); // 设置提示内容
                // 鼠标在节点上移动时显示
                node.addEventListener('pointermove', (event) => {
                    let input = this.stage.inputSystem;
                    // 用 jtopo inputSystem 的页面坐标（或 input.clientX/input.clientY）
                    customTooltip.showAt(input.x, input.y);
                });
                // 鼠标离开节点时隐藏
                node.addEventListener('pointerout', function () {
                    customTooltip.hide();
                });
                const customMenu = new CustomPopupMenu(this.stage);

                // 设置菜单内容（用 .menu-item 标记可点击项）
                customMenu.setHtml(`
                  <div class="header">编辑</div>
                  <div class="menu-item">剪切</div>
                  <div class="menu-item">复制</div>
                  <div class="menu-item">粘贴</div>
                  <div class="menu-item">删除</div>
                  <hr>
                  <div class="header">功能</div>
                  <div class="menu-item">上移一层</div>
                  <div class="menu-item">移至顶部</div>
                  <div class="menu-item">下移一层</div>
                  <div class="menu-item">移至底部</div>
                `);

                // 监听菜单选择事件（替代原有的 addEventListener('select')）
                customMenu.on('select',  (event)=> {
                    node.text = event.item; // 更新节点文本
                });

                // 右键松开时显示菜单（替换原逻辑）
                node.addEventListener('pointerup',  ()=> {
                    let input = this.stage.inputSystem;
                    if (input.button === 2) { // 右键（jtopo 中 button=2 是右键）
                        customMenu.showAt(input.x, input.y); // 基于鼠标位置显示
                    }
                });
            },
            addImageNode() {
                //添加图片节点
                let node = new ImageNode('鼠标放上来', 0, 0, 64, 64);
                node.setImage(require('./t002/icons/icon_server.png'));
                this.layer.addChild(node);
                // 鼠标指向小提示
                let tooltip = new Tooltip(this.stage);
                tooltip.setHtml('小提示:右击弹出菜单');
                // 鼠标在节点上移动时显示
                node.addEventListener('pointermove', (event) => {
                    let is = this.stage.inputSystem;
                    tooltip.showAt(is.x, is.y);
                });
                // 右键菜单
                let popupMenu = new PopupMenu(this.stage, "");
                popupMenu.setHtml(`
                    <div class="header">编辑</div>
                    <a>剪切</a>
                    <a>复制</a>
                    <a>粘贴</a>
                    <a>删除</a>
                    <hr />
                    <div class="header">功能</div>
                    <a>上移一层</a>
                    <a>移至顶部</a>
                    <a>下移一层</a>
                    <a>移至底部</a>
                `);
                // 菜单选择事件处理
                popupMenu.addEventListener('select', (event) => {
                    //event.item： 选中的菜单文本
                    node.text = event.item;
                });
                // 右键松开时显示
                node.addEventListener('pointerup', () => {
                    let input = this.stage.inputSystem;
                    // 取画布上的坐标x,y
                    if (input.button == 2) { // right button
                        popupMenu.showAt(input.x, input.y);
                    }
                });
                // 鼠标按下时隐藏
                this.stage.inputSystem.addEventListener('pointerdown', ()=> {
                    popupMenu.hide();
                });
            },
            //初始化+事件学习
            initTopo() {
                this.stage = new Stage(this.$refs.topo001);
                this.layer = new Layer(this.stage);
            },
        },
    }
</script>
<style lang="scss">
    //引用外部scss，不能使用scoped
    @import './t002/CustomTooltip';
    @import './t002/CustomPopupMenu';
</style>